import { Button, Card, Col, Row, Notification } from '@douyinfe/semi-ui';
import React, { useEffect, useMemo, useState, useReducer } from 'react';
import {
  Route,
  Routes,
  useLocation,
  useNavigate,
  useNavigation,
  useParams,
} from 'react-router-dom';
import combineReducers from 'react-combine-reducers';
import IntegralCard from './integral-card';
import {
  IntegralConsumer,
  IntegralProvider,
  IntegralStoreProvider,
} from './integral-context';
import IntegralEntityCard from './entity/integral-entity-card';
import IntegralEntityDialog from './entity/integral-entity-dialog';
import { deleteItem, setItem } from './reducer/integral-actions';
import { initialIntegral, integralReducer } from './reducer/integral-reducer';
import IntegralDetail from './entity/integral-detail';

const IntegralPage = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const [state, dispatch] = useReducer(
    //@ts-ignore
    ...combineReducers({
      integral: [integralReducer, initialIntegral],
    })
  );
  const useDispatch = (callback: any, ...params: any[]) =>
    callback(...params, dispatch, state);

  const PageEvents = {
    addRecord: () => {
      console.log('add');
      navigate('create');
    },
    detailRecord: (id: string) => {
      // useDispatch(setItem, id);
      navigate(`detail/${id}`);
    },
    editRecord: (id: string) => {
      // useDispatch(setItem, id);
      navigate(`edit/${id}`);
    },
    delRecord: (id: string) => {
      return useDispatch(deleteItem, id);
    },
    exportRecord: () => {
      console.log('导出');
    },
  };

  const store = {
    state,
    useDispatch,
  };

  return (
    <IntegralStoreProvider store={store}>
      <IntegralProvider PageEvents={PageEvents}>
        <IntegralConsumer>
          {({ showFloater, setShowFloater }) => (
            <>
              <Routes>
                <Route path='edit/:id' element={<IntegralCard />} />
                <Route path='detail/:id' element={<IntegralDetail />} />
                <Route path='create' element={<IntegralCard />} />
                <Route index element={<IntegralCard />} />
              </Routes>

              {showFloater && (
                <Card
                  className='absolute end-3 top-3 bottom-3 w-1/5 min-w-[320px] shadow-2xl z-[1000]'
                  bordered={false}
                >
                  floater
                  <Button onClick={() => setShowFloater(false)}>close</Button>
                </Card>
              )}
            </>
          )}
        </IntegralConsumer>

        <Routes>
          <Route
            path='create'
            element={
              <IntegralEntityDialog
                open
                editable
                onClose={() => {
                  navigate('');
                }}
              />
            }
          />
          <Route
            path='edit/:id'
            element={
              <IntegralEntityDialog
                open
                editable
                onClose={() => {
                  navigate('');
                }}
              />
            }
          />
        </Routes>
      </IntegralProvider>
    </IntegralStoreProvider>
  );
};

export default IntegralPage;
